<html>
    <head>
        <title>绑定内联样式</title>
    </head>
    <body>
        <script>
            // ★、绑定内联样式
                      
                        // ★一、 对象语法
                                  
                                    /*
                                        v-bind:style 的对象语法十分直观----看着非常像css  ，
                                        但其实是一个JS对象。CSS 的 property 名可以用驼峰式(camelCase) 或 短横线分割(kebab-case ,记得用单引号括起来) 来命名。 


                                            eg:  <div v-bind:style="{color: activeColor,fontSize:fontSize+'px'}"></div>
                                    */
                                                  data:{
                                                    activeColor:'red',
                                                    fontSize:30
                                                  }

                                     /*
                                        直接绑定到一个"样式对象"通常更好，这会让模板更清晰：
                                            
                                            eg:  <div v-bind:style="styleObject"></div>      
                                     */   
                                                  data:{
                                                    styleObject:{
                                                        color:'red',
                                                        fontSize:'13px'
                                                    }
                                                  }


                                        // 同样的，对象语法常常结合"返回对象的计算属性"使用。


                        //  ★二、数组语法
                                   
                                  /*
                                         v-bind:style 的数组语法可以将多个"样式对象" 应用到同一个元素上：
                                         
                                            eg:  <div v-bind:style="[baseStyle,overridingStyles]"></div>
                                  */                
                                                  data:{
                                                        baseStyle:{
                                                            color:'red',
                                                            fontSize:'13px'
                                                        },
                                                        overridingStyles:{
                                                            'font-weight':'bold',
                                                            'text-decoration':'underline'
                                                        }
                                                  }

                        //  ★三、自动添加前缀
                                /*
                                          当 v-bind:style 使用需要添加"浏览器引擎前缀" 的CSS property 时，如 transform Vue.js 会自动侦测并添加响应的前缀。
                                */

                        
                        // ★四、多重值
                                 /*
                                          从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值得数组，常常用于提供"多个带前缀的值"

                                               eg:   <div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>

                                          这样写只会渲染数组中最后一个被浏览器支持的值。
                                          
                                 */
        </script>
    </body>
</html>